<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bordered {
            border: 1px solid black;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.js"></script>
    <script src="xlsx2.js"></script>
    <script>
        (function ($) {
            $.fn.resizableColumns = function () {
                var isColResizing = false;
                var resizingPosX = 0;
                var _table = $(this);

                var _thead = $(this).find('thead').first();

                _thead.find('th').each(function () {
                    $(this).css('position', 'relative');
                    if ($(this).is(':not(:last-child)') && $(this).is(':not(.no-resize)')) {
                        if ($(this).nextAll('th.no-resize').length < $(this).nextAll('th').length) {
                            $(this).append("<div class='resizer' style='position:absolute;top:0px;right:-3px;bottom:0px;width:6px;z-index:999;background:transparent;cursor:col-resize'></div>");
                        }
                    }
                })

                $(document).mouseup(function (e) {
                    _thead.find('th').removeClass('resizing');
                    isColResizing = false;
                    e.stopPropagation();
                })

                _table.find('.resizer').mousedown(function (e) {
                    if (e.button == 0) {
                        _thead.find('th').removeClass('resizing');
                        $(_thead).find('tr:first-child th:nth-child(' + ($(this).closest('th').index() + 1) + ') .resizer').closest('th').addClass('resizing');
                        resizingPosX = e.pageX;
                        isColResizing = true;
                    }
                    e.stopPropagation();
                }).click(function (e) {
                    return false;
                })

                _table.mousemove(function (e) {
                    if (isColResizing) {

                        var _resizing = _thead.find('th.resizing .resizer');
                        if (_resizing.length == 1) {
                            var _nextRow = _thead.find('th.resizing + th');
                            if (_nextRow.hasClass('no-resize')) {
                                _nextRow = _nextRow.next('th:not(.no-resize)');
                            }
                            var _pageX = e.pageX || 0;
                            var _widthDiff = _pageX - resizingPosX;
                            var _setWidth = _resizing.closest('th').innerWidth() + _widthDiff;
                            var _nextRowWidth = _nextRow.innerWidth() - _widthDiff;
                            if (resizingPosX != 0 && _widthDiff != 0 && _setWidth > 50 && _nextRowWidth > 50) {
                                _resizing.closest('th').innerWidth(_setWidth);
                                resizingPosX = e.pageX;
                                _nextRow.innerWidth(_nextRowWidth);
                            }
                        }
                    }
                })
            };
        }(jQuery))
    </script>
</head>

<body>
    <input type="button" value="测试" onclick="exportExcel()" />
    <table class="bordered" id="tables" border="1" cellspacing="0">

        <thead>
            <tr>
                <th width="10%">合同号</th>
                <th width="15%">客户名称</th>
                <th width="3%">合同金额</th>
                <th width="6%">收款节点</th>
                <th width="13%&quot;">收款描述</th>
                <th width="3%">天数</th>
                <th width="6%">节点完成日期</th>
                <th width="6%">应收款到期日</th>
                <th width="3%">应收款</th>
                <th width="6%">实际收款日期</th>
                <th width="5%">实际收款金额</th>
                <th width="5%">是否逾期</th>
                <th width="5%">逾期天数</th>
                <th width="5%">是否跨月</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>软件运维-2002-0707</td>
                <td>福州市鼓楼生态环境局</td>
                <td>48800.00</td>
                <td>运维款-固定日期</td>
                <td>壹年运维期满后15个工作日内支付，服务期限： 2020年6月3日至2021年6月2日</td>
                <td>19</td>
                <td>2021-06-21</td>
                <td>2021-06-21</td>
                <td>24400.00</td>
                <td></td>
                <td>0.00</td>
                <td bgcolor="00CC00">否</td>
                <td>-206</td>
                <td bgcolor="red">是</td>
            </tr>


            <tr>
                <td>水-2004-0508</td>
                <td>北京航天碧水环境工程技术有限公司</td>
                <td>75016.90</td>
                <td>预付款</td>
                <td>甲方于本合同生效之日起3日内向乙方支付全款</td>
                <td>3</td>
                <td>2020-05-12</td>
                <td>2020-05-15</td>
                <td>75016.90</td>
                <td>2020-05-15</td>
                <td>75016.90</td>
                <td bgcolor="00CC00">否</td>
                <td>0</td>
                <td bgcolor="00CC00">否</td>
            </tr>

            <tr>

                <td><b>合计：</b></td>
                <td>合同金额：</td>
                <td>75016.90</td>
                <td>应收金额：</td>




                <td>75016.90</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>


                <td><img style="width:20px;height:20px"
                        src="/staticResource.action?m=getResource&amp;resourceId=1593670638512azgiGMKb"></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>


            <tr>
                <td>水运维-1920-1223</td>
                <td>天津希日博司塔金属有限公司</td>
                <td>46800.00</td>
                <td>全款</td>
                <td></td>
                <td>0</td>
                <td></td>
                <td></td>
                <td>0.00</td>
                <td></td>
                <td>0.00</td>
                <td bgcolor="00CC00">否</td>
                <td>0</td>
                <td bgcolor="00CC00">否</td>
            </tr>

            <tr>

                <td><b>合计：</b></td>
                <td>合同金额：</td>
                <td>46800.00</td>
                <td>应收金额：</td>




                <td>0.00</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>


                <td><img style="width:20px;height:20px"
                        src="/staticResource.action?m=getResource&amp;resourceId=1593670638512azgiGMKb"></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>


            <tr>
                <td>尾气-2020-1111</td>
                <td>北京首创大气环境科技股份有限公司</td>
                <td>238352.00</td>
                <td>安装调试款（收入确认节点）</td>
                <td>安装调试完成5日内支付剩余50%作为验收调试款</td>
                <td>5</td>
                <td></td>
                <td></td>
                <td>119176.00</td>
                <td></td>
                <td>0.00</td>
                <td bgcolor="00CC00">否</td>
                <td>0</td>
                <td bgcolor="00CC00">否</td>
            </tr>

            <tr>
                <td>尾气-2020-1111</td>
                <td>北京首创大气环境科技股份有限公司</td>
                <td>238352.00</td>
                <td>预付款</td>
                <td>本合同生效之日起5日内支付全部货款的50%作为预付款</td>
                <td>5</td>
                <td>2020-11-25</td>
                <td>2020-11-30</td>
                <td>119176.00</td>
                <td></td>
                <td>0.00</td>
                <td bgcolor="00CC00">否</td>
                <td>0</td>
                <td bgcolor="red">是</td>
            </tr>

            <tr>

                <td><b>合计：</b></td>
                <td>合同金额：</td>
                <td>238352.00</td>
                <td>应收金额：</td>




                <td>238352.00</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>


                <td><img style="width:20px;height:20px"
                        src="/staticResource.action?m=getResource&amp;resourceId=1593670638512azgiGMKb"></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>


            <tr>
                <td>FW-1937-1105</td>
                <td>天津市东丽区华明街道办事处</td>
                <td>142500.00</td>
                <td>预付款</td>
                <td>合同生效见票5日内支付全款</td>
                <td>5</td>
                <td>2019-11-01</td>
                <td>2019-11-06</td>
                <td>142500.00</td>
                <td>2019-11-14</td>
                <td>142500.00</td>
                <td bgcolor="red">是</td>
                <td>8</td>
                <td bgcolor="00CC00">否</td>
            </tr>

            <tr>
                <td>FW-1937-1105</td>
                <td>天津市东丽区华明街道办事处</td>
                <td>142500.00</td>
                <td>全款</td>
                <td></td>
                <td>0</td>
                <td></td>
                <td></td>
                <td>0.00</td>
                <td></td>
                <td>0.00</td>
                <td bgcolor="00CC00">否</td>
                <td>0</td>
                <td bgcolor="00CC00">否</td>
            </tr>

            <tr>

                <td><b>合计：</b></td>
                <td>合同金额：</td>
                <td>142500.00</td>
                <td>应收金额：</td>




                <td>142500.00</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>


                <td><img style="width:20px;height:20px"
                        src="/staticResource.action?m=getResource&amp;resourceId=1593670638512azgiGMKb"></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>


        </tbody>
    </table>

    <body>
        <script>

            
            $(function () {
                $('#tables').resizableColumns();
            });

            function exportExcel() {
                var table1 = document.querySelector("#tables");
                var sheet = XLSX2.utils.table_to_sheet(table1,{ raw: true });

                // var sheet = XLSX.utils.table_to_sheet(document.querySelector("#out-table"), { raw: true });
                openDownloadDialog(sheet2blob(sheet), '报表.xlsx');
            }

            function sheet2blob(sheet, sheetName) {
                sheetName = sheetName || 'sheet1';
                var workbook = {
                    SheetNames: [sheetName],
                    Sheets: {}
                };
                workbook.Sheets[sheetName] = sheet;
                // 生成excel的配置项
                var wopts = {
                    bookType: 'xlsx', // 要生成的文件类型
                    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                    type: 'binary'
                };
                var wbout = XLSX2.write(workbook, wopts);
                var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
                // 字符串转ArrayBuffer
                function s2ab(s) {
                    var buf = new ArrayBuffer(s.length);
                    var view = new Uint8Array(buf);
                    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                    return buf;
                }
                return blob;
            }
            function openDownloadDialog(url, saveName) {
                if (typeof url == 'object' && url instanceof Blob) {
                    url = URL.createObjectURL(url); // 创建blob地址
                }
                var aLink = document.createElement('a');
                aLink.href = url;
                aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
                var event;
                if (window.MouseEvent) event = new MouseEvent('click');
                else {
                    event = document.createEvent('MouseEvents');
                    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                }
                aLink.dispatchEvent(event);
            }

            function exportExcel1() {
                /* 从表生成工作簿对象 */
                var wb = XLSX.utils.table_to_book(document.querySelector("#tables"));
                /* 获取二进制字符串作为输出 */
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    saveAs(
                        //Blob 对象表示一个不可变、原始数据的类文件对象。
                        //Blob 表示的不一定是JavaScript原生格式的数据。
                        //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                        //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                        new Blob([wbout], { type: "application/octet-stream" }),
                        //设置导出文件名称
                        "sheetjs.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            }
        </script>
    </body>

</html>